<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户编号:</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="userId" id="userId" autocomplete="off"
                                            class="layui-input" placeholder="请输入">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户姓名:</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="userName" id="userName" autocomplete="off"
                                            class="layui-input" placeholder="请输入">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">性别：</label>
                                    <div class="layui-inline">
                                        <input type="radio" name="userSex" value="男" title="男">
                                        <input type="radio" name="userSex" value="女" title="女">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item" style="text-align: center">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="seach">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" id="delAll"><i class="layui-icon"></i>批量删除</button>
                    </div>
                    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none" id="userbar" type="text/html">
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </div>
    <script type="text/html" id="isusing">
        <input type="checkbox" name="isusing"  lay-skin="switch" lay-text="正常|停用" lay-filter="isusingSwitch" {{ d.isusing == '1' ? 'checked' : '' }}>
      </script>
</body>
<script>
    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;
        form.on('checkbox(checkall)', function (data) {
            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        table.render({
            elem: '#userTable',
            id: 'user'
            , url: '/getUserList'
            , cellMinWidth: 80
            , cols: [[
                { type: 'checkbox', fixed: 'left', width: "3%" }
                , { field: 'userId', title: '用户编号', sort: true, minWidth: 100 }
                , { field: 'userName', title: '用户名称', minWidth: 100 }
                , {
                    field: 'userUrl', title: '用户头像', minWidth: 100,
                    templet: function (d) {
                        if (d.userUrl) {
                            return '<div ><img src=' + d.userUrl + ' style="width: 50px;" alt=""></div>'
                        } else {
                            return '<div ><img  src="" style="width: 50px;" alt=""></div>'
                        }

                    }
                }
                , { field: 'userPhone', title: '用户电话', minWidth: 100 }
                , { field: 'userSex', title: '用户性别', minWidth: 100 }
                , { field: 'userMon', title: '用户余额', minWidth: 100 }
                , { field: 'isusing', title: '状态', minWidth: 100, templet: '#isusing' }
                , { title: '操作', toolbar: '#userbar' }
            ]]
            , page: true
            , skin: 'row'
            , even: true
            , size: 'lg'
        });

        form.on('switch(isusingSwitch)', function (obj) {
            var data = $(obj.elem);
            var id = data.parents('tr').first().find('td').eq(1).text();
            $.ajax({
                type: "POST",
                url: "/userState",
                data: { userId: id, isusing: obj.elem.checked ? 1 : 0 },
                dataType: "json",
                success: (data) => {
                    if (data.code) {
                        layer.msg('修改成功', {
                            icon: 1
                        });
                        table.reload('user')
                    }
                }
            });
        });

        form.on('submit(seach)', function (data) {
            table.reload('user', {
                where: data.field
            });
        });

        $('#doReset').on('click', function () {
            location.reload();
        });

        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var userId = data.userId
            if (obj.event === 'del') {
                layer.confirm('真的删除该用户吗?', function (index) {
                    $.ajax({
                        type: "Post",
                        url: "/delUser",
                        data: { userId: userId },
                        dataType: "json",
                        success: (data) => {
                            if (data.code) {
                                // obj.del();
                                table.reload('user');
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                layer.close(index);
                            }
                        }
                    });
                });
            }
        });

        $('#delAll').on('click', function () {
            var ids = [];
            var checkStatus = table.checkStatus('user')
                , data = checkStatus.data;
            ids = data.map(item => {
                return item.userId;
            })
            layer.confirm('确认要删除吗？' + ids.toString(), function (index) {
                $.ajax({
                    type: "Post",
                    url: "/delUser",
                    contentType: 'application/json',
                    data: JSON.stringify({ userId: ids }),
                    dataType: "json",
                    success: (data) => {
                        if (data.code) {
                            table.reload('user');
                            layer.msg('删除成功', {
                                icon: 1
                            });
                            layer.close(index);
                        }
                    }
                });
                // layer.msg('删除成功', { icon: 1 });
                // $(".layui-form-checked").not('.header').parents('tr').remove();
            });
        })

    });

</script>

</html>